<template>
  <div class="no-data" :class="[size, hiddenMobile ? 'mobile-hidden' : '']">
    <span v-if="!lang">{{ $t("tag.no_data") }}</span>
    <span>
      <template v-if="lang == 'cn'">暂无数据</template>
      <template v-if="lang == 'en'">No Data</template>
    </span>
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";

type Size = "mini" | "default" | "small" | "large";
type Props = {
  size: Size;
  hiddenMobile?: boolean;
};

const lang = inject("lang");

defineProps<Props>();
</script>
<style scoped lang="less">
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  color: #36434d;
  font-size: 16px;
  &.mini {
    height: 200px;
  }
}

@media screen and (max-width: 768px) {
  .no-data {
    height: 2000px;
    font-size: 72px;
    &.mini {
      height: 1000px;
    }
    &.mobile-hidden {
      display: none;
    }
  }
}
</style>
